
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

<base href="http://hpbs4825.boi.hp.com/clbu/cross-div-Firmware/team-UI_DesignCenter/wj15_html/" />

<title>Windjammer 1.5 Sampler</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="windjammer15.css" rel="stylesheet" type="text/css">
<style type="text/css">
body { padding: 10px; }
.SampleScreen { position: relative; background-color: white; width: 800px; }
.Section { position: relative; font-family: Arial, Helvetica, sans-serif; color: white; display: inline-block; width: 100%; padding-left: 9px; background-color: #777; margin: 60px 10px 20px 0px; font-size:20pt; line-height: 57px; height: 57px; border-bottom: 6px solid white; font-weight: bold; }
p { font-family: Arial, Helvetica, sans-serif; color: black; margin: 0; font-size:13pt; font-weight: normal; width: 800px; }
.cmdStdNav { top: 10px; right: 10px; width: 149px; height: 39px; background-image: url(WJ15PNGs/CmdStdNext.png); background-repeat:no-repeat; font-size: 13pt; font-weight: bold; line-height: 39px; text-align: center; color: black; }
</style>
</head>
<body>
<a name="top"></a>
<div style="position: relative; background-color: #777; height: 59px;">
    <div style="position: absolute; background-color: #838383; background:url(WJ15PNGs/39x39InfoBtn.png) no-repeat 10px 10px; font-size: 18pt; font-weight:bold; color: yellow; padding: 10px 10px 10px 49px;"><img src="WJ15PNGs/39x39InfoBtn.png" width="39" height="39"> &nbsp;&nbsp;A Note About Browser Support </div>
</div>
<div class="flowOnWhite">
    <p>&nbsp;</p>
    <p>Look at the two &quot;i&quot; icons above and see which of the following is the best match. </p>
    <p>&nbsp;</p>
    <p><img src="WJ15PNGs/PNGWorks.png"> You are already using a browser that respects PNG alpha transparency--good for you! </p>
    <p>&nbsp;</p>
    <p><img src="WJ15PNGs/PNGBroken.png"> You are using Internet Explorer version 6 or older. Some of the buttons in our screen shots will look like  the left icon, with the light corners showing. If this bothers you, please download a more modern browser, such as <a href="http://www.apple.com/safari/download/" style="color: blue; text-decoration:underline;">Safari</a>, <a href="http://www.mozilla.com/en-US/firefox/" style="color: blue; text-decoration:underline;">Firefox</a>, or <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx" style="color: blue; text-decoration:underline;">IE 7</a>.</p>
    <p>&nbsp;</p>
    <p><img src="WJ15PNGs/PNGHosed.png" alt=""> You're using IE 6 or older, and either you have not told it to &quot;allow blocked content&quot; on this page, or somehow the pngfix.js script got moved or deleted. Please <a href="mailto:kris.livingston@hp.com" style="color: blue; text-decoration:underline;">contact Kris</a> for assistance. </p>
</div>
<div class="Section">Mastheads<a href="#AppBg">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="flowOnWhite">
    <p>Choose the most appropriate masthead and just change the masthead class and title text to get what you need.</p>
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Home Screen Masthead -->
    <div class="masthead home100">
        <div class="homeHPLogoBlock"></div>
        <div class="AppTitle withHome">HP CM8060 Color MFP</div>
        <div class="label bold white" style="left: 355px; top: 19px;">with Edgeline Technology</div>
        <div class="mastheadHomeGraphic"></div>
        <div class="helpBtnBlock"></div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Warning Screen Masthead -->
    <div class="masthead warning80">
        <div class="AppTitle">Warning</div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Error Screen Masthead -->
    <div class="masthead error80">
        <div class="AppTitle">Error</div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Copy Masthead with Help Button -->
    <div class="masthead copy80">
        <div class="AppTitle">AppTitlePlain</div>
        <div class="helpBtnBlock"></div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead email80">
        <div class="homeBtnBlock"></div>
        <div class="AppTitle withHome">AppTitleWithHome</div>
        <div class="helpBtnBlock"></div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Fax Masthead with Home, Start, and Help Buttons -->
    <div class="masthead fax80">
        <div class="homeBtnBlock"></div>
        <div class="startBtn"></div>
        <div class="AppTitle withHomeAndStart">AppTitleWithHomeStart</div>
        <div class="helpBtnBlock"></div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Folder Masthead with Home, Start, and Help Buttons -->
    <div class="masthead folder80">
        <div class="homeBtnBlock"></div>
        <div class="stopBtn"></div>
        <div class="AppTitle withHomeAndStart">AppTitleWithHomeStart</div>
        <div class="helpBtnBlock"></div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 63px;">

    <!-- Copy Masthead with OK and Cancel Buttons -->
    <div class="masthead copy80">
        <div class="jobBuildBlock">
            <div class="cmdStdEmph">OK</div>
            <div class="cmdStd">Cancel</div>
            <div class="AppTitle">AppTitlePlain</div>
        </div>
        <div class="helpBtnBlock"></div>
    </div>
    
</div>
<a name="AppBg"></a>
<div class="Section">App Backgrounds<a href="#Buttons">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="flowOnWhite">
    <p>These backgrounds are shown with the corresponding empty masthead to demonstrate context. The content area has been shortened to 100px to minimize your scrolling, but if you don't specify a height parameter, the default will will the full remainder of the screen beneath the masthead.</p>
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 163px;">

    <!-- Fax Masthead -->
    <div class="masthead fax80"></div>
    <!-- content area background -->
    <!-- use the style="height: NNNpx;" part only if the content area isn't full screen; e.g., if there's a keyboard at the bottom -->
    <div class="contentBgFax" style="height: 100px;">
        <!-- content goes here -->
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 163px;">

    <!-- Copy Masthead -->
    <div class="masthead copy80"></div>
    <!-- content area background -->
    <!-- use the style="height: NNNpx;" part only if the content area isn't full screen; e.g., if there's a keyboard at the bottom -->
    <div class="contentBgCopy" style="height: 100px;">
        <!-- content goes here -->
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 163px;">

    <!-- Email Masthead -->
    <div class="masthead email80"></div>
    <!-- content area background -->
    <!-- use the style="height: NNNpx;" part only if the content area isn't full screen; e.g., if there's a keyboard at the bottom -->
    <div class="contentBgEmail" style="height: 100px;">
        <!-- content goes here -->
    </div>
    
</div>
<a name="Buttons"></a>
<div class="Section">Buttons<a href="#GraphBtns">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="flowOnWhite">
    <p>Buttons automatically display the correct font attributes, but they can be overridden with a style="" property. The &lt;div&gt; tags for buttons and all other controls on the content background must be nested within the &lt;div&gt; tags for the content background.</p>
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 113px;">

    <!-- Virtual Keyboard sample keys -->
    <div class="bgKbd" style="width: 800px; height: 113px;">
        <div class="label" style="left: 9px; top: 9px;">Keyboard buttons (see <a href="#keyboard" style="color: blue; text-decoration:underline;">Keyboard</a> and <a href="#keypad" style="color: blue; text-decoration:underline;">Keypad</a> sections below):</div>
        <div class="kbdbutton39" style="left: 9px; top: 48px;">39</div>
        <div class="kbdbutton62" style="left: 54px; top: 48px;">62</div>
        <div class="kbdbutton84" style="left: 122px; top: 48px;">84</div>
        <div class="kbdbutton107" style="left: 212px; top: 48px;">107</div>
        <div class="kbdbuttonSpace" style="left: 325px; top: 48px;">247</div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 1000px;">

    <!-- content area background -->
    <div class="bgGray" style="height: 1000px; width: 800px; top: 0;">
        <div class="label" style="left: 9px; top: 9px;">Command buttons:</div>
        <div class="cmdPINDis" style="left: 9px; top: 48px;">PIN</div>
        <div class="cmdPIN" style="left: 9px; top: 93px;">PIN</div>
        <div class="cmdSpdDial" style="left: 9px; top: 363px;">01</div>
        <div class="cmdAMPMDis" style="left: 68px; top: 48px;">AM/PM</div>
        <div class="cmdAMPMAdmin" style="left: 68px; top: 228px;">AM/PM</div>
        <div class="cmdAMPMFax" style="left: 68px; top: 363px;">AM/PM</div>
        <div class="cmdStdDis" style="left: 173px; top: 48px;">Cancel</div>
        <div class="cmdStd" style="left: 173px; top: 93px;">Cancel</div>
        <div class="cmdStdEmph" style="left: 173px; top: 138px;">OK</div>
        <div class="cmdStdAB" style="left: 173px; top: 183px;">Address Book</div>
        <div class="cmdStdAdmin" style="left: 173px; top: 228px;">Admin</div>
        <div class="cmdStdCopy" style="left: 173px; top: 273px;">Copy</div>
        <div class="cmdStdEmail" style="left: 173px; top: 318px;">Email</div>
        <div class="cmdStdFax" style="left: 173px; top: 363px;">Fax</div>
        <div class="cmdStdFolder" style="left: 173px; top: 408px;">Folder</div>
        <div class="cmdStdHelp" style="left: 173px; top: 453px;">Help</div>
        <div class="cmdStdHome" style="left: 173px; top: 498px;">Home</div>
        <div class="cmdStdJobStatus" style="left: 173px; top: 543px;">Job Status</div>
        <div class="cmdStdService" style="left: 173px; top: 588px;">Service</div>
        <div class="cmdStdStorage" style="left: 173px; top: 633px;">Storage</div>
        <div class="cmdStdSupplies" style="left: 173px; top: 678px;">Supplies</div>
        <div class="cmdWideDis" style="left: 328px; top: 48px;">Wide Disabled</div>
        <div class="cmdWide" style="left: 328px; top: 93px;">Wide Normal</div>
        <div class="cmdWideEmph" style="left: 328px; top: 138px;">Wide Emphasized</div>
        <div class="cmdWideAB" style="left: 328px; top: 183px;">Wide Address Book</div>
        <div class="cmdWideAdmin" style="left: 328px; top: 228px;">Wide Admin</div>
        <div class="cmdWideCopy" style="left: 328px; top: 273px;">Wide Copy</div>
        <div class="cmdWideEmail" style="left: 328px; top: 318px;">Wide Email</div>
        <div class="cmdWideFax" style="left: 328px; top: 363px;">Wide Fax</div>
        <div class="cmdWideFolder" style="left: 328px; top: 408px;">Wide Folder</div>
        <div class="cmdWideHelp" style="left: 328px; top: 453px;">Wide Help</div>
        <div class="cmdWideHome" style="left: 328px; top: 498px;">Wide Home</div>
        <div class="cmdWideJobStatus" style="left: 328px; top: 543px;">Wide Job Status</div>
        <div class="cmdWideService" style="left: 328px; top: 588px;">Wide Service</div>
        <div class="cmdWideStorage" style="left: 328px; top: 633px;">Wide Storage</div>
        <div class="cmdWideSupplies" style="left: 328px; top: 678px;">Wide Supplies</div>
        <div class="cmdLongDis" style="left: 522px; top: 48px;">Long Disabled</div>
        <div class="cmdLong" style="left: 522px; top: 93px;">Long Normal</div>
        <div class="cmdLongEmph" style="left: 522px; top: 138px;">Long Emphasized</div>
        <div class="cmdLongAB" style="left: 522px; top: 183px;">Long Address Book</div>
        <div class="cmdLongAdmin" style="left: 522px; top: 228px;">Long Admin</div>
        <div class="cmdLongCopy" style="left: 522px; top: 273px;">Long Copy</div>
        <div class="cmdLongEmail" style="left: 522px; top: 318px;">Long Email</div>
        <div class="cmdLongFax" style="left: 522px; top: 363px;">Long Fax</div>
        <div class="cmdLongFolder" style="left: 522px; top: 408px;">Long Folder</div>
        <div class="cmdLongHelp" style="left: 522px; top: 453px;">Long Help</div>
        <div class="cmdLongHome" style="left: 522px; top: 498px;">Long Home</div>
        <div class="cmdLongJobStatus" style="left: 522px; top: 543px;">Long Job Status</div>
        <div class="cmdLongService" style="left: 522px; top: 588px;">Long Service</div>
        <div class="cmdLongStorage" style="left: 522px; top: 633px;">Long Storage</div>
        <div class="cmdLongSupplies" style="left: 522px; top: 678px;">Long Supplies</div>
        <div class="cmdStdPrev" style="left: 173px; top: 723px;">Previous</div>
        <div class="cmdStdNextEmph" style="left: 328px; top: 723px;">Next</div>
        <div class="cmdStdNext" style="left: 483px; top: 723px;">Next</div>
        <div class="cmdStdEmph" style="left: 638px; top: 723px;">Finish</div>
        <div class="label" style="left: 9px; top: 728px;">Wizard buttons:</div>
        <div class="label" style="left: 9px; top: 778px;">Dropdown buttons:</div>
        
        <!-- Dropdown List Button - supports widths greater than about 200, but >250 is recommended. -->
        <div class="dropDown admin50" style="left: 173px; top: 773px; width: 252px;">
            <div class="ddBtn"><img src="WJ15PNGs/DropDownFg.png"></div>
            <p>This is a flexible Drop...</p>
        </div>
        
         <!-- Dropdown List Button - supports widths greater than about 200, but >250 is recommended. -->
       <div class="dropDown jobStatus50" style="left: 173px; top: 818px; width: 300px;">
            <div class="ddBtn"><img src="WJ15PNGs/DropDownFg.png"></div>
            <p>This is a flexible Dropdown ...</p>
        </div>
        
        <!-- Dropdown List Button - supports widths greater than about 200, but >250 is recommended. -->
        <div class="dropDown addrBk50" style="left: 173px; top: 863px; width: 350px;">
            <div class="ddBtn"><img src="WJ15PNGs/DropDownFg.png"></div>
            <p>This is a flexible Dropdown button</p>
        </div>
        
        <!-- Dropdown List Button - supports widths greater than about 200, but >250 is recommended. -->
        <div class="dropDown supplyStatus50" style="left: 173px; top: 908px; width: 413px;">
            <div class="ddBtn"><img src="WJ15PNGs/DropDownFg.png"></div>
            <p>This is a flexible Dropdown button</p>
        </div>
        
    </div>
</div>
<a name="GraphBtns"></a>
<div class="Section">Graphical Buttons<a href="#keyboard">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 203px;">
    <div class="bgGray" style="width: 800px; height: 203px;">
    
        <div class="label" style="left: 9px; top: 9px;">Graphical buttons:</div>
        <div class="startBtn" style="left: 9px; top: 48px;"></div>
        <div class="stopBtn" style="left: 54px; top: 48px;"></div>
        <div class="homeBtn" style="left: 99px; top: 48px;"></div>
        <div class="addrBkBtn" style="left: 144px; top: 48px;"></div>
        <div class="detailsBtn" style="left: 189px; top: 48px;"></div>
        <div class="searchBtn" style="left: 234px; top: 48px;"></div>
        <div class="eraseBtn" style="left: 279px; top: 48px;"></div>
        <div class="backspaceBtn" style="left: 324px; top: 48px;"></div>
        <div class="deleteBtn" style="left: 369px; top: 48px;"></div>
        <div class="deleteXBtn" style="left: 414px; top: 48px;"></div>
        <div class="editBtn" style="left: 459px; top: 48px;"></div>
        <div class="transferUpBtn" style="left: 504px; top: 48px;"></div>
        <div class="transferDownBtn" style="left: 549px; top: 48px;"></div>
        <div class="transferRightBtn" style="left: 594px; top: 48px;"></div>
        <div class="addBtn" style="left: 639px; top: 48px;"></div>
        <div class="pageDown" style="left: 9px; top: 93px;"></div>
        <div class="scrollNorth" style="left: 78px; top: 93px;"></div>
        <div class="scrollNorthDis" style="left: 128px; top: 93px;"></div>
        <div class="scrollSouth" style="left: 178px; top: 93px;"></div>
        <div class="scrollSouthDis" style="left: 228px; top: 93px;"></div>
        <div class="scrollWest" style="left: 278px; top: 93px;"></div>
        <div class="scrollEast" style="left: 328px; top: 93px;"></div>
        
    </div>
</div>
<a name="keyboard"></a>
<div class="Section">Virtual Keyboard, Edit Boxes<a href="#keypad">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead email80">
        <div class="homeBtnBlock"></div>
        <div class="AppTitle withHome">AppTitleWithHome</div>
        <div class="helpBtnBlock"></div>
    </div>
    
    <!-- Status Bar  -->
    <div class="statusBar">
        <div class="statusString">Various text edit boxes appear below</div>
        
        <!-- Copy Count Edit Box -->
        <div class="EditBoxActive copy100" style="left: 724px; top: 4px; width: 67px;">
            <div class="EditField highlighted" style="font-size: 17.5pt; font-weight: bold;_width: 57px;">999</div>
        </div>
        
    </div>
    
    <div class="contentBgEmail withStatusBarAndKbd">

        <!-- Active, Multi-line Edit Box -->
        <div class="EditBoxActive email100" style="left: 106px; top: 48px; width: 287px; height: 189px;">
            <!-- for IE, set the EditField _width (below) to 10 less than the EditBoxActive width (above) -->
            <!-- setting the height to 10 less than the EditBoxActive height (above) is for ALL browsers-->
            <div class="EditField alignLeft" style="_width:277px; height: 179px; line-height: 26px;"> &nbsp;Active Multi-line Edit Box<br>
                &nbsp;Second line<br>
                &nbsp;Third line
                <!-- Scrollbar -->
                <div class="scrollbarOnWhite">
                    <div class="scrollUpArrow"></div>
                    <div class="scrollThumb"></div>
                    <div class="beveledRightEdges"></div>
                </div>
            </div>
        </div>
        
        <!-- Inactive Edit Box -->
        <div class="EditBoxInactive email100" style="left: 506px; top: 48px; width: 187px;">
            <!-- for IE, set the EditField _width (below) to 5 less than the EditBoxInactive width (above) -->
            <div class="EditField" style="_width:182px;">Inactive Edit Box</div>
        </div>
        
        <!-- Active Edit Box -->
        <div class="EditBoxActive email100" style="left: 506px; top: 98px; width: 187px;">
            <!-- for IE, set the EditField _width (below) to 10 less than the EditBoxActive width (above) -->
            <div class="EditField" style="_width:177px;">Active Edit Box</div>
        </div>
        
        <!-- Active and Highlighted Edit Box -->
        <div class="EditBoxActive email100" style="left: 506px; top: 148px; width: 187px;">
            <!-- for IE, set the EditField _width (below) to 10 less than the EditBoxActive width (above) -->
            <div class="EditField highlighted" style="_width:177px;">highlighted Edit Box</div>
        </div>
        
        <!-- Disabled Edit Box -->
        <div class="EditBoxDis" style="left: 506px; top: 198px; width: 187px;">
            <!-- for IE, set the EditField _width (below) to 2 less than the EditBoxActive width (above) -->
            <div class="EditField" style="_width:185px;">Disabled Edit Box</div>
        </div>
        
    </div>
    
    <!-- Virtual Keyboard -->
    <div class="VirtualKeyboard">
        <iframe frameborder="0" width="800" height="225" src="commonKeyboard.html"></iframe>
    </div>
    
</div>
<a name="keypad"></a>
<div class="Section">Virtual Keypads<a href="#labels">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 785px;">
        
    <div class="bgGray" style="height: 785px; top: 0; left: 0; width: 800px;">

        <!-- Virtual Fax Keypad -->
        <div style="left: 9px; top: 9px;">
            <iframe frameborder="0" width="348" height="379" src="Keypad-FaxNum.html"></iframe>
        </div>
        
        <!-- Virtual Copy Keypad -->
        <div style="left: 382px; top: 9px;">
            <iframe frameborder="0" width="348" height="379" src="Keypad-CopyInteger.html"></iframe>
        </div>
        
        <!-- Virtual Fax Keypad -->
        <div style="left: 9px; top: 397px;">
            <iframe frameborder="0" width="348" height="379" src="Keypad-EmailDouble.html"></iframe>
        </div>
        
        <!-- Virtual Copy Keypad -->
        <div style="left: 382px; top: 397px;">
            <iframe frameborder="0" width="348" height="379" src="Keypad-CopyComma.html"></iframe>
        </div>
        
    </div>
</div>

<a name="labels"></a>
<div class="Section">Labels<a href="#ListBoxes">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 320px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead copy80">
        <div class="homeBtnBlock"></div>
        <div class="AppTitle withHome">AppTitleWithHome</div>
        <div class="helpBtnBlock"></div>
    </div>
    
    <!-- Status Bar  -->
    <div class="statusBar">
        <div class="statusString">Various labels appear below</div>
    </div>
    
    <div class="contentBgCopy withStatusBar" style="height: 198px;">
        <!-- content goes here -->
        
        <div class="GroupBox" style="left: 9px; top: 9px; width: 782px; height: 110px;">
            <!-- Standard Label -->
            <div class="label" style="left: 9px; top: 9px;">This is a standard label (label)</div>
            <!-- Bold Label -->
            <div class="label bold" style="left: 9px; top: 35px;">This is a bold label (label bold)</div>
            <!-- Centered Bold Label -->
            <div class="label bold alignCenter" style="left: 9px; top: 78px; width: 764px;">label bold alignCenter</div>
            <!-- Right-aligned Label -->
            <div class="label alignRight" style="left: 373px; top: 9px; width: 400px;">This one is right-aligned (label alignRight)</div>
            <!-- Bold, Right-aligned Label -->
            <div class="label bold alignRight" style="left: 373px; top: 35px; width: 400px;">And this one is bold (label bold alignRight)</div>
        </div>
        <div class="copy100" style="left: 9px; top: 128px; width: 391px; height: 26px;">
            <div class="label white" style="left: 0px; top: 0px;">label white</div>
        </div>
        <div class="copy100" style="left: 400px; top: 128px; width: 391px; height: 39px;">
            <div class="label white bold alignRight middle39" style="left: 9px; top: 0px; width: 373px;"> label white bold alignRight middle39</div>
        </div>
        <!-- Label -->
        <div class="label" style="left: 9px; top: 167px; width: 764px;">plain labels are vertically centered within 26 px, but middle39 labels are centered within 39 px.</div>
    </div>
</div>

<a name="ListBoxes"></a>
<div class="Section">List Boxes, Trees and Breadcrumb Trails<a href="#Sliders">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 1192px;">

    <div class="contentBgFolder" style="top: 0; height: 1192px;">
        <div class="GroupBox" style="left: 6px; top: 6px; width: 782px; height: 1142px;">

        	<!-- Breadcrumb Trail -->
            <div class="breadcrumb storage100">
                <div class="bcBackBtn">&lt; Back</div>
                <div class="bcTrail"><span class="bcLink">Top Level</span> &gt; <span class="bcLink">Next Level</span> &gt; Last Level</div>
            </div>

            <!-- radio listBox -->
            <div class="listHeader" style="left: 9px; top: 45px; width: 240px;">listBox radio</div>
            <div class="listBox radio manyitems" style="left: 9px; top: 78px; width: 240px;">
                <div class="listItem" style="top: 0px;">
                    <div class="itemLabel">Unselected</div>
                </div>
                <div class="listItemSelected radioBtnAdmin" style="top: 50px;">
                    <div class="itemLabel">Admin</div>
                </div>
                <div class="listItemSelected radioBtnAddrBk" style="top: 100px;">
                    <div class="itemLabel">Address Book</div>
                </div>
                <div class="listItemSelected radioBtnCopy" style="top: 150px;">
                    <div class="icon"><img src="WJ15PNGs/Icons/51AutolayoutUp.png" width="31" height="38"/></div>
                    <div class="itemLabel withIcon">Copy</div>
                </div>
                <div class="listItemSelected radioBtnEmail" style="top: 200px;">
                    <div class="itemLabel">E-mail</div>
                </div>
                <div class="listItemSelected radioBtnFax" style="top: 250px;">
                    <div class="itemLabel">Fax</div>
                </div>
                <div class="listItemSelected radioBtnFolder" style="top: 300px;">
                    <div class="itemLabel">Folder</div>
                </div>
                <div class="listItemSelected radioBtnFtp" style="top: 350px;">
                    <div class="itemLabel">FTP</div>
                </div>
                <div class="listItemSelected radioBtnHelp" style="top: 400px;">
                    <div class="itemLabel">Help</div>
                </div>
                <div class="listItemSelected radioBtnHome" style="top: 450px;">
                    <div class="itemLabel">Home</div>
                </div>
                <div class="listItemSelected radioBtnInfo" style="top: 500px;">
                    <div class="itemLabel">Information</div>
                </div>
                <div class="listItemSelected radioBtnJobStatus" style="top: 550px;">
                    <div class="itemLabel">Job Status</div>
                </div>
                <div class="listItemSelected radioBtnService" style="top: 600px;">
                    <div class="itemLabel">Service</div>
                </div>
                <div class="listItemSelected radioBtnStorage" style="top: 650px;">
                    <div class="itemLabel">Job Storage</div>
                </div>
                <div class="listItemSelected radioBtnSupplies" style="top: 700px;">
                    <div class="itemLabel">Supplies Status</div>
                </div>
                <!-- Scrollbar -->
                <div class="scrollbar">
                    <div class="scrollUpArrow"></div>
                    <div class="scrollThumb"></div>
                    <div class="beveledRightEdges"></div>
                </div>
            </div>

            <!-- beveled listBox -->
            <div class="listHeader" style="left: 258px; top: 45px; width: 250px;">listBox beveled</div>
            <div class="listBox beveled manyitems" style="left: 258px; top: 78px; width: 250px;">
                <div class="listItem" style="top: 0px;">
                    <div class="itemLabel">Alpha</div>
                </div>
                <div class="listItem" style="top: 50px;">
                    <div class="itemLabel">Bravo</div>
                </div>
                <div class="listItem" style="top: 100px;">
                    <div class="itemLabel withIcon">Charlie</div>
                </div>
                <div class="listItemSelected" style="top: 150px;">
                    <div class="itemLabel withIcon">Delta</div>
                </div>
                <div class="listItem" style="top: 200px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 250px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 300px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 350px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 400px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 450px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 500px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 550px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 600px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 650px;">
                    <div class="itemLabel"></div>
                </div>
                <div class="listItem" style="top: 700px;">
                    <div class="itemLabel"></div>
                </div>
                <!-- Scrollbar -->
                <div class="scrollbarDis">
                    <div class="scrollUpArrow"></div>
                    <div class="scrollThumb"></div>
                    <div class="beveledRightEdges"></div>
                </div>
            </div>

            <!-- check listBox -->
            <div class="listHeader" style="left: 517px; top: 45px; width: 240px;">listBox checkBox</div>
            <div class="listBox checkBox manyitems" style="left: 517px; top: 78px; width: 240px;">
                <div class="listItem" style="top: 0px;">
                    <div class="itemLabel">Unselected</div>
                </div>
                <div class="listItemSelected checkBoxAdmin" style="top: 50px;">
                    <div class="itemLabel">Admin</div>
                </div>
                <div class="listItemSelected checkBoxAddrBk" style="top: 100px;">
                    <div class="itemLabel">Address Book</div>
                </div>
                <div class="listItemSelected checkBoxCopy" style="top: 150px;">
                    <div class="icon"><img src="WJ15PNGs/Icons/1to2SidedUp.png" width="56" height="38"/></div>
                    <div class="itemLabel withWideIcon">Copy</div>
                </div>
                <div class="listItemSelected checkBoxEmail" style="top: 200px;">
                    <div class="itemLabel">E-mail</div>
                </div>
                <div class="listItemSelected checkBoxFax" style="top: 250px;">
                    <div class="itemLabel">Fax</div>
                </div>
                <div class="listItemSelected checkBoxFolder" style="top: 300px;">
                    <div class="itemLabel">Folder</div>
                </div>
                <div class="listItemSelected checkBoxFtp" style="top: 350px;">
                    <div class="itemLabel">FTP</div>
                </div>
                <div class="listItemSelected checkBoxHelp" style="top: 400px;">
                    <div class="itemLabel">Help</div>
                </div>
                <div class="listItemSelected checkBoxHome" style="top: 450px;">
                    <div class="itemLabel">Home</div>
                </div>
                <div class="listItemSelected checkBoxInfo" style="top: 500px;">
                    <div class="itemLabel">Information</div>
                </div>
                <div class="listItemSelected checkBoxJobStatus" style="top: 550px;">
                    <div class="itemLabel">Job Status</div>
                </div>
                <div class="listItemSelected checkBoxService" style="top: 600px;">
                    <div class="itemLabel">Service</div>
                </div>
                <div class="listItemSelected checkBoxStorage" style="top: 650px;">
                    <div class="itemLabel">Job Storage</div>
                </div>
                <div class="listItemSelected checkBoxSupplies" style="top: 700px;">
                    <div class="itemLabel">Supplies Status</div>
                </div>
                <!-- Scrollbar -->
                <div class="scrollbar">
                    <div class="scrollUpArrow"></div>
                    <div class="scrollThumb"></div>
                    <div class="beveledRightEdges"></div>
                </div>
            </div>

            <!-- speedDial listBox -->
            <div class="listHeader" style="left: 6px; top: 837px; width: 434px;">One Touch Speed Dials</div>
            <div class="listBox speedDial fiveItems" style="left: 6px; top: 870px; width: 434px;">
                <div class="listItem" style="top: 0px;">
                    <div class="cmdSpdDial" style="left: 6px; top: 5px;">00</div>
                    <div class="label multiline" style="left: 65px; top: 5px;">Name<br />Number</div>
                    <div class="cmdSpdDial" style="left: 194px; top: 5px;">01</div>
                    <div class="label multiline" style="left: 253px; top: 5px;">Name<br />Number</div>
                </div>
                <div class="listItem" style="top: 50px;">
                    <div class="cmdSpdDial" style="left: 6px; top: 5px;">02</div>
                    <div class="label multiline" style="left: 65px; top: 5px;">Name<br />Number</div>
                    <div class="cmdSpdDial" style="left: 194px; top: 5px;">03</div>
                    <div class="label multiline" style="left: 253px; top: 5px;">Name<br />Number</div>
                </div>
                <div class="listItem" style="top: 100px;">
                    <div class="cmdSpdDial" style="left: 6px; top: 5px;">04</div>
                    <div class="label multiline" style="left: 65px; top: 5px;">Name<br />Number</div>
                    <div class="cmdSpdDial" style="left: 194px; top: 5px;">05</div>
                    <div class="label multiline" style="left: 253px; top: 5px;">Name<br />Number</div>
                </div>
                <div class="listItem" style="top: 150px;">
                    <div class="cmdSpdDial" style="left: 6px; top: 5px;">06</div>
                    <div class="label multiline" style="left: 65px; top: 5px;">Name<br />Number</div>
                    <div class="cmdSpdDial" style="left: 194px; top: 5px;">07</div>
                    <div class="label multiline" style="left: 253px; top: 5px;">Name<br />Number</div>
                </div>
                <div class="listItem" style="top: 200px;">
                    <div class="cmdSpdDial" style="left: 6px; top: 5px;">08</div>
                    <div class="label multiline" style="left: 65px; top: 5px;">Name<br />Number</div>
                    <div class="cmdSpdDial" style="left: 194px; top: 5px;">09</div>
                    <div class="label multiline" style="left: 253px; top: 5px;">Name<br />Number</div>
                </div>
                <!-- Scrollbar -->
                <div class="scrollbar">
                    <div class="scrollUpArrow"></div>
                    <div class="scrollThumb"></div>
                    <div class="beveledRightEdges"></div>
                </div>
            </div>

        </div>
    </div>
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead admin80">
        <div class="homeBtnBlock"></div>
        <div class="AppTitle withHome">Tree List</div>
        <div class="helpBtnBlock"></div>
    </div>

    <!-- Status Bar -->
    <div class="statusBar">
        <div class="statusString">Ready</div>
    </div>
    
    <div class="contentBgAdmin withStatusBar">
        <!-- content goes here -->
        <div class="GroupBox" style="left: 9px; top: 9px; width: 782px; height: 456px;">
        
            <!-- breadcrumb trail -->
            <div class="breadcrumb admin100">
                <div class="bcBackBtnDis">&lt; Back</div>
                <div class="bcTrail">Top Level</div>
            </div>
            
            <!-- beveled listBox -->
            <div class="listHeader" style="left: 6px; top: 45px; width: 350px;">Top Level</div>
            <div class="listBox beveled sixTallItems" style="left: 6px; top: 78px; width: 350px;">
                <div class="listItemTall" style="top: 0px;">
                    <div class="disclosureBox"></div>
                    <div class="itemLabel bold"> Branch items are bold</div>
                </div>
                <div class="listItemTall" style="top: 62px;">
                    <div class="itemLabel">Leaf items are not bold</div>
                </div>
                <div class="listItemTall" style="top: 124px;">
                    <div class="disclosureBox"></div>
                    <div class="itemLabel bold twoLines">Some wordy items require two lines to display fully</div>
                </div>
                <div class="listItemTallSelected" style="top: 186px;">
                    <div class="itemLabel">Only leaves can be highlighted</div>
                </div>
                <div class="listItemTall" style="top: 248px;">
                    <div class="itemLabel">Because touching a branch</div>
                </div>
                <div class="listItemTall" style="top: 310px;">
                    <div class="itemLabel twoLines">causes the list to drill down to the next level.</div>
                </div>
                <!-- Scrollbar -->
                <div class="scrollbarDis">
                    <div class="scrollUpArrow"></div>
                    <div class="scrollThumb"></div>
                    <div class="beveledRightEdgesTall"></div>
                </div>
            </div>
            
            <div class="bgGray" style="left: 362px; top: 45px; width: 414px; height: 405px;">
                <div class="wjcontent" style="left: 6px; top: 6px; width: 402px; height: 393px;">
                    <h1>Administration</h1>
                    <p style="width: 380px;">This gray box needs additional style to format its contents. Now is the time for all good men to come to the aid of their country.</p>
                </div>
            </div>
            
        </div>
    </div>
</div>
<a name="Sliders"></a>
<div class="Section">Sliders<a href="#Widgets">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 461px;">
    <div class="contentBgSettings" style="top: 0; height: 461px;">
    
    	<!-- Slider -->
        <div class="slider withIcons" style="left: 9px; top: 9px;">
        	<img class="leftSliderBtn" src="WJ15PNGs/39x39ScrollWestUp.png" width="39" height="39" />
            <img class="sliderTrack" src="WJ15PNGs/SliderTrackCyan.png">
        	<img class="rightSliderBtn" src="WJ15PNGs/39x39ScrollEastUp.png" width="39" height="39" />
        </div>
    
    	<!-- Slider -->
        <div class="slider withIcons" style="left: 9px; top: 54px;">
        	<img class="leftSliderBtn" src="WJ15PNGs/39x39ScrollWestUp.png" width="39" height="39" />
            <img class="leftIcon" src="WJ15PNGs/Icons/ColorGoodUp.png">
            <img class="sliderTrack" src="WJ15PNGs/SliderTrackMagenta.png">
            <img class="rightIcon" src="WJ15PNGs/Icons/ColorBestUp.png">
        	<img class="rightSliderBtn" src="WJ15PNGs/39x39ScrollEastUp.png" width="39" height="39" />
        </div>
    
    	<!-- Slider -->
        <div class="slider withIcons" style="left: 9px; top: 99px;">
        	<img class="leftSliderBtn" src="WJ15PNGs/39x39ScrollWestUp.png" width="39" height="39" />
            <img class="leftIcon" src="WJ15PNGs/Icons/twocolorUp.png" width="31" height="38">
            <img class="sliderTrack" src="WJ15PNGs/SliderTrackYellow.png">
            <img class="rightIcon" src="WJ15PNGs/Icons/ColorBestUp.png">
        	<img class="rightSliderBtn" src="WJ15PNGs/39x39ScrollEastUp.png" width="39" height="39" />
        </div>
    
    	<!-- Slider -->
        <div class="slider withIcons" style="left: 9px; top: 144px;">
        	<img class="leftSliderBtn" src="WJ15PNGs/39x39ScrollWestUp.png" width="39" height="39" />
            <img class="leftIcon" src="WJ15PNGs/Icons/twocolorUp.png" width="31" height="38">
            <img class="sliderTrack" src="WJ15PNGs/SliderTrackBlack.png">
            <img class="rightIcon" src="WJ15PNGs/Icons/ColorBestUp.png">
        	<img class="rightSliderBtn" src="WJ15PNGs/39x39ScrollEastUp.png" width="39" height="39" />
        </div>
    
    	<!-- Slider -->
        <div class="slider" style="left: 9px; top: 189px;">
        	<img class="leftSliderBtn" src="WJ15PNGs/39x39ScrollWestUp.png" width="39" height="39" />
            <img class="leftIcon" src="WJ15PNGs/Icons/ColorGoodUp.png">
            <img class="sliderTrack" src="WJ15PNGs/SliderTrackUnfilled.png">
            <img class="rightIcon" src="WJ15PNGs/Icons/ColorBestUp.png">
        	<img class="rightSliderBtn" src="WJ15PNGs/39x39ScrollEastUp.png" width="39" height="39" />
        </div>
        
    	<!-- Slider -->
        <div class="slider" style="left: 9px; top: 234px;">
        	<img class="leftSliderBtn" src="WJ15PNGs/39x39ScrollWestUp.png" width="39" height="39" />
            <img class="leftIcon" src="WJ15PNGs/Icons/ColorGoodUp.png">
            <img class="sliderTrack" src="WJ15PNGs/SliderTrackFilled.png">
            <img class="rightIcon" src="WJ15PNGs/Icons/ColorBestUp.png">
        	<img class="rightSliderBtn" src="WJ15PNGs/39x39ScrollEastUp.png" width="39" height="39" />
        </div>
        
    </div>
</div>
<a name="Widgets"></a>
<div class="Section">Option Widgets<a href="#HomeScreen">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 461px;">
    <div class="contentBgSettings" style="top: 0; height: 461px;">
    
        <!-- Large Option Widget (left) -->
        <div class="OpWLgLeft copy100" style="top: 9px;">
            <div class="WidgetTitle">Sides</div>
            <div class="WidgetField">2 to 2 Sided</div>
            <div class="WLgLeftIcon" style="top: 23px;"><img src="WJ15PNGs/Icons/87SidedUp.png"></div>
            <div class="WLgChgArrowLeft"></div>
        </div>
        
        <!-- Large Option Widget (right) -->
        <div class="OpWLgRight copy100" style="top: 9px; left: 451px;">
            <div class="WidgetTitle">Color/Black</div>
            <div class="WidgetField">Color, Professional</div>
            <div class="WLgRightIcon" style="top: 22px;"><img src="WJ15PNGs/Icons/87ColorBlackUp.png"></div>
            <div class="WLgChgArrowRight"></div>
        </div>
        
        <!-- Small Option Widget (left) -->
        <div class="OpWSmLeft folder100" style="top: 127px;">
            <div class="WidgetTitle">Output Quality</div>
            <div class="WidgetField">High (Large File) </div>
            <div class="WSmLeftIcon" style="top: 12px;"><img src="WJ15PNGs/Icons/51OutputQualityUp.png"></div>
        </div>
        
        <!-- Small Option Widget (right) -->
        <div class="OpWSmRight fax100" style="top: 127px; left: 451px;">
            <div class="WidgetTitle">Image Adjustment</div>
            <div class="WidgetField">Normal</div>
            <div class="WSmRightIcon" style="top: 11px;"><img src="WJ15PNGs/Icons/51ImageAdjustUp.png"></div>
        </div>
        
        <!-- Small Option Widget (left) -->
        <div class="OpWSmLeft storage100" style="top: 199px;">
            <div class="WidgetTitle">Staple/Collate</div>
            <div class="WidgetField">Collated</div>
            <div class="WSmLeftIcon" style="top: 12px;"><img src="WJ15PNGs/Icons/51StapleUp.png"></div>
        </div>
        
        <!-- Small Option Widget (right) -->
        <div class="OpWSmRight email100" style="top: 199px; left: 451px;">
            <div class="WidgetTitle">Content Orientation</div>
            <div class="WidgetField">Portrait</div>
            <div class="WSmRightIcon" style="top: 14px;"><img src="WJ15PNGs/Icons/51ContentOrientUp.png"></div>
        </div>
        
        <!-- Large Option Widget (left) Disabled -->
        <div class="OpWLgLeftDis" style="top: 271px;">
            <div class="WidgetTitle">Paper Selection</div>
            <div class="WidgetField">Automatic</div>
            <div class="WLgLeftIcon" style="top: 35px;"><img src="WJ15PNGs/Icons/info.png" width="39" height="39"></div>
        </div>
        
        <!-- Large Option Widget (right) Disabled -->
        <div class="OpWLgRightDis" style="top: 271px; left: 451px;">
            <div class="WidgetTitle">Paper Selection</div>
            <div class="WidgetField">Automatic</div>
            <div class="WLgRightIcon" style="top: 35px;"><img src="WJ15PNGs/Icons/info.png" width="39" height="39"></div>
        </div>
        
        <!-- Small Option Widget (left) Disabled -->
        <div class="OpWSmLeftDis" style="top: 389px;">
            <div class="WidgetTitle">Job Build</div>
            <div class="WidgetField">Off</div>
            <div class="WSmLeftIcon" style="top: 12px;"><img src="WJ15PNGs/Icons/info.png" width="39" height="39"></div>
        </div>
        
        <!-- Small Option Widget (right) Disabled -->
        <div class="OpWSmRightDis" style="top: 389px; left: 451px;">
            <div class="WidgetTitle">Job Build</div>
            <div class="WidgetField">Off</div>
            <div class="WSmRightIcon" style="top: 12px;"><img src="WJ15PNGs/Icons/info.png" width="39" height="39"></div>
        </div>
        
    </div>
</div>
<a name="HomeScreen"></a>
<div class="Section">Home Screen Widgets <a href="#dialogs">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 600px;">

    <!-- Home Screen Masthead -->
    <div class="masthead home100">
        <div class="homeHPLogoBlock"></div>
        <div class="AppTitle withHome">HP CM8060 Color MFP</div>
        <div class="label bold white" style="left: 355px; top: 19px;">with Edgeline Technology</div>
        <div class="mastheadHomeGraphic"></div>
        <div class="helpBtnBlock"></div>
    </div>
    
    <!-- Status Bar -->
    <div class="statusBar">
        <div class="statusString">Ready.</div>
        <div class="label bold alignRight" style="top: 10px; left: 519px; width:200px;">Copies:</div>
        <!-- Copy Count Edit Box -->
        <div class="EditBoxActive copy100" style="left: 724px; top: 4px; width: 67px;">
            <div class="EditField highlighted" style="font-size: 17.5pt; font-weight: bold;_width: 57px;">999</div>
        </div>
    </div>
    
    <div class="contentBgHome">
    
        <!-- App Button - Copy -->
        <div class="HomeButton" style="left: 6px; top: 6px;">
            <div class="WidgetTitle copy80">Copy</div>
            <div class="WidgetField">Make copies from an original document</div>
            <div class="HomeButtonBtn">
                <div class="HomeButtonIcon" style="top: 23px;"> <img src="WJ15PNGs/Icons/87HomeCopyUp.png" width="62" height="62"> </div>
            </div>
        </div>
        
        <!-- App Button - E-Mail -->
        <div class="HomeButton" style="left: 377px; top: 6px;">
            <div class="WidgetTitle email80">E-Mail</div>
            <div class="WidgetField">Send a document as an attachment to an e-mail</div>
            <div class="HomeButtonBtn">
                <div class="HomeButtonIcon" style="top: 36px;"> <img src="WJ15PNGs/Icons/87HomeEmailUp.png" width="62" height="40"> </div>
            </div>
        </div>
        
        <!-- App Button - Fax -->
        <div class="HomeButtonDis" style="left: 6px; top: 150px;">
            <div class="WidgetTitle">Fax</div>
            <div class="WidgetField">Send a document to one or more fax numbers</div>
            <div class="HomeButtonBtn">
                <div class="HomeButtonIcon" style="top: 25px;"> <img src="WJ15PNGs/Icons/87HomeFaxDis.png" width="66" height="57"> </div>
            </div>
        </div>
        
        <!-- App Button - Network Folder -->
        <div class="HomeButton" style="left: 377px; top: 150px;">
            <div class="WidgetTitle folder80">Network Folder</div>
            <div class="WidgetField">Scan and send a document to a computer</div>
            <div class="HomeButtonBtn">
                <div class="HomeButtonIcon" style="top: 24px;"> <img src="WJ15PNGs/Icons/87HomeFolderUp.png" width="66" height="62"> </div>
            </div>
        </div>
        
        <!-- App Button - Job Storage -->
        <div class="HomeButton" style="left: 6px; top: 294px;">
            <div class="WidgetTitle storage80">Job Storage</div>
            <div class="WidgetField">Scan and store a job</div>
            <div class="HomeButtonBtn">
                <div class="HomeButtonIcon" style="top: 29px;"> <img src="WJ15PNGs/Icons/87HomeJobStoreUp.png" width="62" height="50"> </div>
            </div>
        </div>
        
        <!-- App Button - Job Status -->
        <div class="HomeButton" style="left: 377px; top: 294px;">
            <div class="WidgetTitle jobStatus80">Job Status</div>
            <div class="WidgetField">Check on active and completed jobs</div>
            <div class="HomeButtonBtn">
                <div class="HomeButtonIcon" style="top: 25px;"> <img src="WJ15PNGs/Icons/87HomeJobStatusUp.png" width="49" height="63"> </div>
            </div>
        </div>
        
        <!-- Scrollbar -->
        <div class="scrollbarOnWhite">
            <div class="scrollUpArrow"></div>
            <div class="scrollThumb"></div>
            <div class="beveledRightEdges"></div>
        </div>
        
    </div>
    
    <div class="BottomBtnBar">
        <div class="label white" style="top: 12px; left: 9px;">Mar/25/2008 1:55 PM</div>
        <div class="cmdWideHome" style="left: 606px; top: 6px;">Sign Out</div>
        <div class="cmdLongHome" style="left: 347px; top: 6px;">Network Address</div>
    </div>
    
</div>
<a name="dialogs"></a>
<div class="Section">Dialogs &amp; Popups<a href="#top">
    <div class="cmdStdNav">Next</div>
    </a></div>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead copy80">
        <div class="homeBtnBlockDis"></div>
        <div class="startBtn"></div>
        <div class="AppTitle withHomeAndStart">Copy</div>
        <div class="helpBtnBlockDis"></div>
    </div>
    
    <!-- Tall Status Bar for Copy app -->
    <div class="tallStatusBar">
        <div class="statusString">This is a settings dialog for the Copy app, class=settingsDlogCopy</div>
    </div>
    
    <div class="contentBgService withTallStatusBar">
        <!-- content goes here -->
    </div>
    
    <!-- Copy Settings Dialog -->
    <div class="settingsDlogCopy">
        <!-- Dialog Title -->
        <div class="dlogTitle">Some Copy Settings Dialog</div>
        <!-- Dialog OK button -->
        <a href="javascript:history.back();">
        <div class="dlogOK">OK</div>
        </a>
        <!-- Dialog Cancel button -->
        <a href="javascript:history.back();">
        <div class="dlogCancel">Cancel</div>
        </a> </div>
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead fax80">
        <div class="homeBtnBlockDis"></div>
        <div class="startBtn"></div>
        <div class="AppTitle withHomeAndStart">Fax</div>
        <div class="helpBtnBlockDis"></div>
    </div>
    
    <!-- Status Bar for Copy -->
    <div class="statusBar">
        <div class="statusString">This is a tall settings dialog for any non-Copy app, class=settingsDlogTall</div>
    </div>
    
    <div class="contentBgFax withStatusBar">
        <!-- content goes here -->
    </div>
    
    <!-- Large Settings Dialog -->
    <div class="settingsDlogTall fax100">
        <!-- Dialog Title -->
        <div class="dlogTitle">Some Fax Settings Dialog</div>
        <!-- Dialog OK button -->
        <a href="javascript:history.back();">
        <div class="dlogOK">OK</div>
        </a>
        <!-- Dialog Cancel button -->
        <a href="javascript:history.back();">
        <div class="dlogCancel">Cancel</div>
        </a> 
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead folder80">
        <div class="homeBtnBlockDis"></div>
        <div class="startBtn"></div>
        <div class="AppTitle withHomeAndStart">Folder</div>
        <div class="helpBtnBlockDis"></div>
    </div>
    
    <!-- Status Bar for Copy -->
    <div class="statusBar">
        <div class="statusString">This is an acknowledged feedback popup, class=ackFeedbackPopup</div>
    </div>
    
    <div class="contentBgFolder withStatusBar">
        <!-- content goes here -->
    </div>
    
    <!-- Feedback Popup -->
    <div class="ackFeedbackPopup folder80">
        <h1>I'm sorry, Dave...</h1>
        <p>I'm afraid I can't do that.</p>
        <!-- Popup Centered OK button -->
        <a href="javascript:history.back();">
            <div class="popupCenteredOK">OK</div>
        </a>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead jobStatus80">
        <div class="homeBtnBlockDis"></div>
        <div class="startBtn"></div>
        <div class="AppTitle withHomeAndStart">Job Status</div>
        <div class="helpBtnBlockDis"></div>
    </div>
    
    <!-- Status Bar  -->
    <div class="statusBar">
        <div class="statusString">This is an acknowledged feedback popup, class=ackFeedbackPopup</div>
    </div>
    
    <div class="contentBgJobStatus withStatusBar">
        <!-- content goes here -->
    </div>
    
    <!-- Feedback Popup -->
    <div class="ackFeedbackPopup jobStatus100">
        <h1>Pod Bay Door Error</h1>
        <p>Entrance to the space station is not permitted while the pod bay doors are closed. Click OK to open the pod bay doors and proceed.</p>
        <!-- popup/dialog OK button -->
        <a href="javascript:history.back();">
        <div class="dlogOK">OK</div>
        </a>
        <!-- popup/dialog Cancel button -->
        <a href="javascript:history.back();">
        <div class="dlogCancel">Cancel</div>
        </a>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead admin80">
        <div class="homeBtnBlockDis"></div>
        <div class="AppTitle withHome">Administration > Resets</div>
        <div class="helpBtnBlockDis"></div>
    </div>
    
    <!-- Status Bar -->
    <div class="statusBar">
        <div class="statusString">This is a timed feedback popup, class=timedFeedbackPopup</div>
    </div>
    <div class="contentBgAdmin withStatusBar">
        <!-- content goes here -->
    </div>
    
    <!-- Timed Feedback Popup -->
    <div class="timedFeedbackPopup admin80">
        <h1>Resetting selected subsystems...</h1>
        <p>We will return to our regularly scheduled programming momentarily.</p>
        <div class="timedPopupProgressBar"></div>
    </div>
    
</div>
<p>&nbsp;</p>
<div class="SampleScreen" style="height: 600px;">

    <!-- E-Mail Masthead with Home and Help Buttons -->
    <div class="masthead storage80">
        <div class="homeBtnBlockDis"></div>
        <div class="AppTitle withHome">Job Storage</div>
        <div class="helpBtnBlockDis"></div>
    </div>
    
    <!-- Status Bar for Copy -->
    <div class="statusBar">
        <div class="statusString">Ready</div>
    </div>
    <div class="contentBgStorage withStatusBar">
        <!-- content goes here -->
    </div>
    
    <!-- Timed Feedback Popup -->
    <div class="largeFeedbackPopup storage100">
        <h1>Resetting selected subsystems...</h1>
        <p>We will return to our regularly scheduled programming momentarily.</p>
        <h1>Lipsum Text</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum nisl vitae nisi. Quisque tincidunt porttitor orci. Proin porttitor imperdiet neque. Aenean egestas convallis nisi. Etiam mattis dignissim mauris. In hac habitasse platea dictumst. In placerat, nulla vitae vehicula rhoncus, erat dolor convallis nunc, nec suscipit nisi nisl in metus. Quisque bibendum adipiscing sapien. Phasellus ultrices nisl eget odio. Maecenas varius malesuada velit. Nullam a felis. Suspendisse tempor.</p>
        <h1>Scroll for More</h1>
        
        <!-- Scrollbar -->
        <div class="scrollbarInLgPopup">
            <div class="scrollUpArrow"></div>
            <div class="scrollThumb"></div>
            <div class="beveledRightEdges"></div>
        </div>
        
        <!-- popup/dialog OK button -->
        <a href="javascript:history.back();">
        <div class="dlogOK">OK</div>
        </a>
        
        <!-- popup/dialog Cancel button -->
        <a href="javascript:history.back();">
        <div class="dlogCancel">Cancel</div>
        </a> 
        
    </div>
</div>
<div class="flowOnWhite">
    <p class="label bold">Text Size Samples - Demonstrates limitations of Windows font rendering</p>
    <p class="label" style="font-size: 12.1pt;">12.1pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.2pt;">12.2pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.3pt;">12.3pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.4pt;">12.4pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.5pt;">12.5pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.6pt;">12.6pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.7pt;">12.7pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.8pt;">12.8pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 12.9pt;">12.9pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.0pt;">13.0pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.1pt;">13.1pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.2pt;">13.2pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.3pt;">13.3pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.4pt;">13.4pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.5pt;">13.5pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.6pt;">13.6pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.7pt;">13.7pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.8pt;">13.8pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 13.9pt;">13.9pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
    <p class="label" style="font-size: 14.0pt;">14.0pt - ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890</p>
</div>
<!-- Revision History Footer -->
<div id="Footer" style="position: relative; top: inherit;">
    <table>
        <tr>
            <th width="150px">Mod. Date</th>
            <th width="650px">Hewlett Packard Company Confidential</th>
        </tr>
        <tr>
            <td valign="top">March, 2008 KRL</td>
            <td>Created this sampler page as a way to test and demonstrate the Windjammer UI elements that were supported by the windjammer15.css file.</td>
        </tr>
        <tr>
            <td valign="top">April, 2008 KRL</td>
            <td>Added more UI elements, including three list boxes, dialogs, and popups</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="3" style="background-color: white;"><a href="./">Return to WJ1.5 Home</a> </td>
        </tr>
    </table>
</div>
</body>
</html>
